<template>
	<!-- 工单统计 -->
	<view>
		<view class="search">
			<u-search
				shape="square"
				placeholder="单号/设备编号/设备名称" 
				input-align="left" 
				height="70" 
				bg-color="#ffffff"
				:show-action="false" 
				v-model="searchKey" 
				@custom="onSearch" 
				@search="onSearch">
			</u-search>
		</view>
		<view class="operation">
			<view class="date-select">
				<view class="date-item" @click="selectDate(0)">{{ startDate }}</view>
				<view >至</view>
				<view class="date-item" @click="selectDate(1)">{{ endDate }}</view>
			</view>
			<view class="state-select">
				<view class="state-item">{{ stateText }}</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>
		<view class="worksheet-content">
			<view class="sheet-title">
				<icon-text icon-path="/static/images/tabicon/home.png" :icon-position="0" :icon-text="sheetTitle"></icon-text>
				<u-icon name="trash" ></u-icon>
			</view>
			<u-line></u-line>
			<view  v-for="(item,index) in sheetList" :key="index">
				<work-sheet-item
					:workSheet="item"
					:is-last="index === (sheetList.length-1)"
					@toDetail="toDetail"
				></work-sheet-item>
			</view>
			<u-loadmore :status="status" />
		</view>
		<u-calendar v-model="calendarShow" mode="date" @change="datecSelected"></u-calendar>
	</view>
</template>

<script>
	import iconText from '@/components/icon-text.vue'
	import workSheetItem from './components/work-sheet-item.vue'
	export default{
		components:{
			iconText,
			workSheetItem
		},
		data(){
			return{
				searchKey:'',
				startDate:'2021-06-08',
				endDate:'2021-06-08',
				stateText:'已修好',
				calendarShow:false,
				dateType:0, //当前日期选择类型 start 0/end 1
				sheetList:[
					{
						orderNum:21060611,
						state:1,
						devName:'设备A',
						macAddres:'AD-23-SV-MB-22',
						faultReason:'接触不良',
						reportMan:'张三',
						reportTime:'2021-06-08 15:23:11',
						repairMan:'李四',
						repairTime:'2021-06-08 16:23:11',
					},
					{
						orderNum:21060611,
						state:1,
						devName:'设备A',
						macAddres:'AD-23-SV-MB-22',
						faultReason:'接触不良',
						reportMan:'张三',
						reportTime:'2021-06-08 15:23:11',
						repairMan:'李四',
						repairTime:'2021-06-08 16:23:11',
					},{
						orderNum:21060611,
						state:1,
						devName:'设备A',
						macAddres:'AD-23-SV-MB-22',
						faultReason:'接触不良',
						reportMan:'张三',
						reportTime:'2021-06-08 15:23:11',
						repairMan:'李四',
						repairTime:'2021-06-08 16:23:11',
					},{
						orderNum:21060611,
						state:1,
						devName:'设备A',
						macAddres:'AD-23-SV-MB-22',
						faultReason:'接触不良',
						reportMan:'张三',
						reportTime:'2021-06-08 15:23:11',
						repairMan:'李四',
						repairTime:'2021-06-08 16:23:11',
					},{
						orderNum:21060611,
						state:1,
						devName:'设备A',
						macAddres:'AD-23-SV-MB-22',
						faultReason:'接触不良',
						reportMan:'张三',
						reportTime:'2021-06-08 15:23:11',
						repairMan:'李四',
						repairTime:'2021-06-08 16:23:11',
					},{
						orderNum:21060611,
						state:1,
						devName:'设备A',
						macAddres:'AD-23-SV-MB-22',
						faultReason:'接触不良',
						reportMan:'张三',
						reportTime:'2021-06-08 15:23:11',
						repairMan:'李四',
						repairTime:'2021-06-08 16:23:11',
					},
				],
				status:'loadmore',
				page:1,
 			}
		},
		computed:{
			sheetTitle(){
				return '共'+this.sheetList.length+'条记录'
			},
		},
		methods:{
			onSearch(key){
				console.log('search key:',key)
			},
			selectDate(type){
				this.dateType = type
				this.calendarShow = true
			},
			datecSelected(date){
				console.log("dateSelected:",date)
				if(this.dateType === 0){
					this.startDate = date.result
				}else if(this.dateType === 1){
					this.endDate = date.result
				}
			},
			toDetail(sheet){
				console.log('toDetail',sheet)
				this.$u.route('/pages/deviceWorkSheet/workSheetDetail/index')
			}
		},
		onReachBottom() {
			if(this.page >= 3) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				this.sheetList.push({orderNum:21060611,
						state:1,
						devName:'设备A',
						macAddres:'AD-23-SV-MB-22',
						faultReason:'接触不良',
						reportMan:'张三',
						reportTime:'2021-06-08 15:23:11',
						repairMan:'李四',
						repairTime:'2021-06-08 16:23:11',})
				if(this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		}
	}
</script>

<style scoped lang="scss">
	.search{
		padding: 30rpx 30rpx 0;
		background: #f5f5f5;
	}
	.operation{
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #f5f5f5;
		.date-select{
			display: flex;
			flex-direction: row;
			align-items: center;
			.date-item{
				padding: 10rpx 10rpx;
				border: 2rpx solid #f5f5f5;
				border-radius: 8rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				background: #FFFFFF;
			}
		}
		.state-select{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 10rpx 10rpx;
			border: 2rpx solid #f5f5f5;
			border-radius: 8rpx;
			margin-right: 30rpx;
			background: #FFFFFF;
		}
	}
	.sheet-title{
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 30rpx;
	}
</style>
